<template>
  <div class="costInfo">
    <div class="mapBox">
      <div class="informationBox">
        <p>{{ this.startTime|datafmt('YYYY年MM月DD日 HH:MM:SS')}} -- {{this.endTime|datafmt('HH:MM:SS')}}</p>
        <p>行驶{{this.roadDistance}}公里,用时{{this.roadTime}}分钟</p>
      </div>
    </div>
    <div class="moneyBox">    
      <fieldset>
        <legend>费用详细</legend>
      </fieldset>
      <div class="message">
        <div class="text base clearfix">
          <p class="left">{{this.start}}</p>
          <p class="right">{{this.startPrice}}元</p>
        </div>
        <div class="text only clearfix">
          <p class="left">里程费({{this.roadDistance}}公里)</p>
          <p class="right">{{this.milePrice}}元</p>
        </div>
        <div class="text time clearfix">
          <p class="left">{{this.lang}}</p>
          <p class="right">{{this.overTimePrice}}元</p>
        </div>
        <div class="text night clearfix">
          <p class="left">{{this.low}}</p>
          <p class="right">{{this.emptyDriverPrice}}元</p>
        </div>
      </div>
      <div class="all">
        <div class="alltext clearfix">
          <p class="right">总计: {{this.allPrice}}元</p>
        </div>
      </div>
    </div>
    <div class="wxPay">
      <fieldset>
        <legend>支付方式</legend>
      </fieldset>
      <div class="weixinLogo">
        <a href="jacascript:;">
          <img src="../../assets/images/weixin.png" alt="">
        </a>
      </div>
      <button @click="weChatPay">立即支付</button>
      <!-- <a class="WechatPay" >WechatPay</a> -->
    </div>
  </div>
</template>
<script>
import {wechatPay} from 'api/api'
import {mapGetters, mapMutations} from 'vuex'
import axios from 'axios'
export default {
  data () {
    return {
      start: '起步价',
      startPrice: '138',
      milePrice: 'xx',
      lang: '远途费',
      overTimePrice: 'xx',
      low: '低速费',
      emptyDriverPrice: 'xx',
      allPrice: 'xx',
      // 支付需要参数
      appid: '',
      noncestr: '',
      package: '',
      partnerid: '',
      prepayid: '',
      sign: '',
      timestamp: '',
      // 订单详情信息展示
      startTime: '',
      endTime: '',
      roadDistance: '',
      roadTime: ''
    }
  },
  computed: {
    ...mapGetters([
    ])
  },
  mounted () {
    this.init()
  },
  created () {
    this.getOrderdtail()
  },
  methods: {
    // 获取订单详情
    getOrderdtail () {
      let orderNum = localStorage.getItem('orderNum')
      let token = localStorage.getItem('token')
      axios.get('http://39.104.54.182:8080/ecar/r/passenger/' + orderNum + '/' + token + '/getPassengerOrderPriceDetail')
      .then((res) => {
        console.log(res)
        this.startTime = res.data.result.startTime  // 订单产生时间
        this.endTime = res.data.result.endTime  // 订单结束时间
        this.roadTime = res.data.result.roadTime // 订单持续时间
        this.roadDistance = res.data.result.roadDistance  // 行驶距离
        this.startPrice = res.data.result.basePrice  // 订单起步价
        this.milePrice = res.data.result.overMileagePrice  // 订单里程费
        this.overTimePrice = res.data.result.overTimePrice  // 订单超时费
        this.emptyDriverPrice = res.data.result.emptyDriverPrice  // 订单空载费
        this.lightDriverPrice = res.data.result.lightDriverPrice  // 订单夜间行驶费
        this.allPrice = res.data.result.totalPrice // 订单总金额
      }).catch(error => {
        console.log(error)
      })
    },
    // 微信支付
    weChatPay () {
      let orderId = localStorage.getItem('orderNum')
      axios.post(wechatPay, {
        'param': {
          'fields': {
            'orderId': orderId
          }
        }
      }).then((res) => {
        console.log(res)
        this.appid = res.data.result.appid
        this.noncestr = res.data.result.noncestr
        this.package = res.data.result.package
        this.partnerid = res.data.result.partnerid
        this.sign = res.data.result.sign
        this.timestamp = res.data.result.timestamp
        this.weixnext()
      })
    },
    /*eslint-disable */
    onBridgeReady () {
      let that =this
      WeixinJSBridge.invoke(
        'getBrandWCPayRequest', {
          'appId': that.appid, // 公众号名称，由商户传入
          'timeStamp': that.timestamp, // 时间戳，自1970年以来的秒数
          'nonceStr': that.noncestr, // 随机串
          'package': that.package,
          'signType': 'MD5', // 微信签名方式
          'paySign': that.sign, // 微信签名
        },
        function (res) {
          console.log(res)
          if (res.err_msg === 'get_brand_wcpay_request:ok') {
          } // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠
        }
      )
    },
    weixnext () {
      if (typeof WeixinJSBridge === 'undefined') {
        if (document.addEventListener) {
          document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false)
        } else if (document.attachEvent) {
          document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady)
          document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady)
        }
      } else {
        this.onBridgeReady()
      }
    },
    init () {
      if (localStorage.getItem('token') === null){
        this.$router.push('/login')
      }
    },
    ...mapMutations({
      setSearchBoxInfo: 'SET_SEARCHBOXINFO',
      setShowSearchBox: 'SET_SHOWSEARCHBOX',
      setShowEnd: 'SET_SHOWEND',
      setDestination: 'SET_DESTINATION',
      setEstimatePrice: 'SET_ESTIMATEPRICE',
      setShowCarpool: 'SET_SHOWCARPOOL',
      setShowType: 'SET_SHOWTYPE',
      setShowInType: 'SET_SHOWINTYPE'
    })
  }
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
.costInfo{
  width: 100%;
}
.mapBox,.moneyBox,.wxPay{
  width: 90%;
  margin-left: 5%;
}
.costInfo .mapBox{
  position: relative;
  height: 200px;
  border: 2px solid rgb(210, 210, 210)
}
.costInfo .mapBox .informationBox{
  position: absolute;
  left: 0;
  bottom: 0;
  height: 50px;
  width: 100%;
  background-color: rgba(0,0,0,.6);
}
.costInfo .mapBox .informationBox p{
  height: 50%;
  width: 100%;
  color: rgb(255,255,255);
  line-height: 25px;
}
 fieldset{
  width 100%
  margin 0 auto
  margin-top 20px
  border: 1px solid rgb(153, 153, 153)
  border-left: none
  border-right: none
  border-bottom: none
}
 fieldset legend{
   width 100px
   font-size 14px
   color rgb(153,153,153)
 }
 .message
      width: 100%
      height: 110px
      margin: 0 auto
      margin-top: 30px
      border-bottom: 1px solid rgb(153, 153, 153)
      .text
        width: 100%
        height: 13px
        margin-bottom: 13px
        font-size: 13px
        color: rgb(153, 153, 153) 
      .left
        float: left
      .right
        float: right
.all{
  width: 290px
  height: 15px
  margin-top: 10px 
}   
.all .alltext{
  float right 
  color rgb(51,51,51)
}
.weixinLogo{
  width 50px
  height 50px
  margin 40px auto
}
.wxPay .weixinLogo img{
  width 100%
}
.wxPay button{
  width 100%
  height 50px
  background-color rgb(255,36,36)
  border none
  border-radius 5px
  color #fff
}
</style>